import React, { Component } from 'react';
import { connect } from 'dva';
import {
    Flex,
    Icon,
    Tabs,
    NavBar,
    Popover,
    WingBlank,
    WhiteSpace,
    ActionSheet,
    Carousel,
    Modal,
    Grid,
    List,
    Button,
    Toast,
} from 'antd-mobile';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import MyScroll from '../../components/MyScroll/MyScroll';
import {routerRedux} from "dva/router";
import {groupDetail} from './groupDetail.less';
import  duihao from'../../assets/svg/duihao.svg';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';


class GroupDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {

        };
    }

    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };
    render() {
        const {dispatch,shopOpenGroup} = this.props;
        const {goods={},memberList=[]} = shopOpenGroup;
        return (
            <Flex style={{
                height:"100%"
            }} className={groupDetail} direction="column">
                <NavTopBar title="拼团详细" isBlack={1} jumpUrl={`/groupOrder`} dispatch={this.props.dispatch} rightContent={[
                    <Icon key="0" type="search" onClick={ e => this.props.dispatch(routerRedux.push({pathname: "/filterOrder/1"})) } style={{ marginRight: '0.32rem' }} />,
                    <Icon key="1" type="xiaoxi" onClick={ e => this.props.dispatch(routerRedux.push({pathname: "/messagesCenter"})) }/>,
                ]}/>
                <MyScroll getAlloyTouch={ this.getAlloyTouch }>
                    <div style={{paddingBottom:"1rem",background:"#fff"}}>
                        <div className="header">
                            <Flex style={{color:"#fff",fontSize:".35rem",padding:".4rem 0 0 0"}} justify="center">
                                <Icon type={duihao.id} style={{marginRight:".2rem"}}></Icon>
                                <div>恭喜你拼团成功了</div>
                            </Flex>
                            <Flex style={{boxShadow:"2px 0px 12px rgba(7,0,2,0.2)",background:"#fff",borderRadius:".4rem",width:"90%",padding:".3rem 0",margin:"auto",position:"relative",top:".7rem"}}>
                                <NoLazyImg src={goods.goodsImage?goods.goodsImage:""} style={{width:"1.5rem",height:"1.5rem",margin:"0 .2rem"}}></NoLazyImg>
                                <div>
                                    <div style={{lineHeight:".4rem",marginBottom:".3rem",width:"90%"}}>{goods.goodsName}</div>
                                    <Flex justify="between" style={{width:"100%"}}>
                                        <Flex justify="end">
                                            <div style={{color:"#ff0036",marginRight:".1rem",fontSize:".28rem"}}>¥{goods.groupPrice}</div>
                                            <div className="price">¥{goods.goodsPrice}</div>
                                        </Flex>
                                        <div className="joinNum">
                                            {goods.joinNum}人团
                                        </div>
                                    </Flex>
                                </div>
                            </Flex>
                        </div>
                    </div>
                    <div style={{width:"100%",background:"#fff",margin:".2rem 0"}}>
                        <Flex justify="center" style={{fontSize:".3rem",padding:".3rem 0"}}>
                            人数已满，<span style={{color:"#ff0036"}}>拼团成功</span>
                        </Flex>
                        <Flex justify="center" style={{padding:"0 0 .3rem 0"}}>
                            {memberList.map((v,i)=>{
                                return <div key={i} style={{textAlign:"center",margin:"0.3rem"}}>
                                    <div style={{position:"relative",marginBottom:".1rem"}}>
                                        <NoLazyImg src={v.memberAvatar } style={{width:"1rem",height:"1rem",borderRadius:"100%"}}></NoLazyImg>
                                        {v.memberType==1?<div className="tuanzhang">团长</div>:""}
                                    </div>
                                    <div>{v.memberName }</div>
                                </div>
                            })}
                        </Flex>
                    </div>
                    <div style={{width:"100%",background:"#fff",marginBottom:".2rem",padding:".2rem 0"}}>
                        <WingBlank>
                            <Flex justify="between">
                                <Flex>
                                    <div style={{position:"relative"}}>
                                        <NoLazyImg src={shopOpenGroup.leaderAvatar?shopOpenGroup.leaderAvatar:"" } style={{width:"1.2rem",height:"1.2rem",borderRadius:"100%"}}></NoLazyImg>
                                        <div className="tuanzhang">团长</div>
                                    </div>
                                    <div style={{color:"#666",marginLeft:".2rem"}}>{shopOpenGroup.leaderName }</div>
                                </Flex>
                                <div style={{color:"#666"}}>
                                    {shopOpenGroup.createTime}
                                </div>
                            </Flex>

                        </WingBlank>
                    </div>
                    <div style={{width:"100%",background:"#fff",marginBottom:".2rem",padding:".2rem 0"}}>
                        <WingBlank>
                            <Flex justify="between">
                               <div>拼团须知</div>
                                <div style={{color:"#666"}}>
                                    好友参团-人满发货-人不满退款
                                </div>
                            </Flex>

                        </WingBlank>
                    </div>
                </MyScroll>
                <div style={{background:"#ff0036",width:"100%",color:"#fff",textAlign:"center",padding:".3rem 0"}} onClick={(e)=>{
                    this.props.dispatch(routerRedux.push(`/goodsDetail/${goods.specId}`));
                }
                }>再拼一单</div>
            </Flex>
        );
    }
}


export default connect(({ shopOpenGroup }) => ({ shopOpenGroup }))(GroupDetail);